<template>
  <div class="index">
    <img class="bgIndex" src="../assets/index.png" alt />
    <div class="centerContent">
      <Alert>输入别名让我们记录你的身份</Alert>
      <Input v-model="name" placeholder="请输入别名..." style="width: 200px;margin:20px" />
      <div style="width:100%">
        <Button type="primary" style="margin-top:10px" @click="next">下一步</Button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: ""
    };
  },
  mounted() {
    localStorage.removeItem("name");
    localStorage.removeItem("creator");
    localStorage.removeItem("hostId");
    localStorage.removeItem("hostSetting");
  },
  methods: {
    next() {
      if (this.name != "") {
        // this.$axios
        //   .get("/langren/user", {
        //     params: {
        //       aliasName: this.name
        //     }
        //   })
        //   .then(res => {
        //     if (res.data.code == 200) {
        //       localStorage.name = this.name;
        //       this.$router.push("/choose");
        //     } else {
        //       this.$Message.error("哦豁！别名被使用了，请重试");
        //     }
        //   })
        //   .catch(err => {
        //     console.log(err);
        //     this.$Message.error("哦豁！别名被使用了，请重试");
        //   });
        localStorage.name = this.name;
        this.$router.push("/choose");
      } else {
        this.$Message.warning("输入别名让我们记录你的身份");
      }
    }
  }
};
</script>
<style scoped>
.index {
  position: relative;
  overflow: hidden;
}
.bgIndex {
  height: 100vh;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}
.centerContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* height: 200px; */
  width: 95%;
  max-width: 680px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  padding: 20px;
}
</style>